<template>
    <div class="app-container">
        <div class="customContainer">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item pull-left" effect="dark" placement="bottom" style="margin-top: 5px">
                        <div slot="content" style="line-height:20px">
                            1.门店结业后web端门店财务日报模块的数据不可再修改。
                            <br> 2.建议结业时间为21:00以后。
                            <br> 3.结业后PC端将不可使用，待次日06:00点正式营业之后方可正常使用。
                            <br> 4.同一门店当日只可进行一次结业操作。
                            <br> 5.当天结业前需完成昨日的结业操作，否则无法进行当日的结业操作。
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" label='门店名称' prop="store_name"></el-table-column>
                <el-table-column align="center" label='时间' prop="create_time"></el-table-column>
                <el-table-column align="center" label='门店状态'>
                    <template slot-scope="scope">
                        {{scope.row.status=='1'?'已结业':scope.row.status=='2'?'未结业':'待结业'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label='结业操作人' prop="clerk_name"></el-table-column>
                <el-table-column align="center" label='备注'>
                    <template slot-scope="scope">
                        {{scope.row.remark?scope.row.remark:'-'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label='结业' size="small">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="completeClick(scope.row,scope.$index)">{{scope.row.status=='1'?'结业详情':'　结业　'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 弹框 -->
            <el-dialog :close-on-click-modal="false" width="80%" :title="dialogTitle" :visible.sync="completeDialog"
                center>
                <div style="position:absolute;top:54px;" v-if="is_look">
                    状态：{{ complete_status}}
                </div>
                <div style="text-align:center" v-else>
                    <span v-if="completeInfo.report==0||completeInfo.sundry==0||completeInfo.coins_project==0">今日门店财务日报未录入全部数据，是否确认结业。结业后将不可修改当天门店财务日报数据。</span>
                    <span v-else-if="diff < 0">
                        今日门店实收金额与应收金额差额为
                        <span class="danger">{{diff|keepTwoNum}}</span>
                        元，是否确认结业。结业后将不可修改当天门店财务日报以及杂项入账数据。
                    </span>
                    <span v-else>确认结业后将不可修改当天门店财务日报以及杂项入账数据。</span>
                </div>
                <br>
                <el-table  highlight-current-row :data="completeInfo.list" border>
                    <el-table-column align="center" label='门店名称' prop="store_name"></el-table-column>
                    <el-table-column align="center" property="datetime" label="时间"></el-table-column>
                    <el-table-column align="center" label='报账类型'>
                        <template slot-scope="scope">
                            {{scope.row.is_dui==1?'兑币机': scope.row.is_dui==2?'杂项入账':'收银台'}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" property="area_name" label="报账区域">
                        <template slot-scope="scope">
                            {{scope.row.area_name}}{{scope.row.no}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="应收金额(元)">
                        <template slot-scope="scope">
                            <span v-if="scope.row.is_dui==2">{{scope.row.d0*1+scope.row.d1*1+scope.row.d2*1+scope.row.d3*1+scope.row.m0*1+scope.row.m1*1+scope.row.m2*1+scope.row.m3*1+scope.row.m4*1|keepTwoNum}}</span>
                            <span v-else>{{scope.row.d0*1+scope.row.d1*1+scope.row.d2*1+scope.row.d3*1+scope.row.m0*1+scope.row.m3*1+scope.row.m4*1|keepTwoNum}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="实收金额(元)">
                        <template slot-scope="scope">
                            <span v-if="scope.row.is_dui==2">{{scope.row.d0*1+scope.row.d1*1+scope.row.d2*1+scope.row.d3*1+scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.collecting_actual*1+scope.row.m1*1+scope.row.m2*1|keepTwoNum}}</span>
                            <span v-else> {{scope.row.d0*1+scope.row.d1*1+scope.row.d2*1+scope.row.d3*1+scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.collecting_actual*1|keepTwoNum}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="差额">
                        <template slot-scope="scope">
                            <!-- <span v-if="scope.row.is_dui==2" :class="
                                (scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.collecting_actual*1)-(scope.row.m0*1+scope.row.m3*1+scope.row.m4*1)<0?
                                'danger':
                                (scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.collecting_actual*1)-(scope.row.m0*1+scope.row.m3*1+scope.row.m4*1)>0?
                                'success':''">
                                {{(scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.collecting_actual*1)-(scope.row.m0*1+scope.row.m3*1+scope.row.m4*1)|keepTwoNum}}
                            </span> -->

                            <span :class="
                            (scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.collecting_actual*1)-(scope.row.m0*1+scope.row.m3*1+scope.row.m4*1)<0?
                            'danger':
                            (scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.collecting_actual*1)-(scope.row.m0*1+scope.row.m3*1+scope.row.m4*1)>0?
                            'success':''">
                                {{(scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.collecting_actual*1)-(scope.row.m0*1+scope.row.m3*1+scope.row.m4*1)|keepTwoNum}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" property="nick" label="交账店员"></el-table-column>
                </el-table>
                <br>
                <br>
                <el-input type="textarea" placeholder="输入备注内容" v-if="!is_look" v-model="saveForm.remark"></el-input>
                <div slot="footer" style="overflow:hidden" v-if="!is_look">
                    <div class="pull-right">
                        <el-button type="primary" @click="saveClick()" size="small"> 确 定 </el-button>
                    </div>
                </div>
                <p>
                    <span class="danger">*</span> 收银台应收=PC端现金收入+PC端银行卡收入+PC端代收待核收入
                    <br> <span class="danger">*</span> 收银台实收=Web端收银台门店财务报账
                    <br><span class="danger">*</span> 杂项入账应收=杂项入账实收=杂项入账门店财务报账
                    <br><span class="danger">*</span> 兑币机应收=兑币机实收=兑币机门店财务报账
                </p>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getStoreList,
        getBrandList,
        complete,
        save
    } from "@/api/finance/store_complete";
    export default {
        data() {
            return {
                list: [],
                is_look: false,
                listLoading: false,
                dialogTitle: '',
                diff: '',
                storeList: [],
                brandList: [],
                completeDialog: false,
                completeInfo: [],
                complete_status: [],
                formInline: {
                    brand: '',
                    store_id: '',
                },
                saveForm: {
                    remark: '',
                    datetime: '',
                    store_id: '',
                }
            };
        },
        created() {
            this.getStore()
        },
        methods: {
            saveClick() {
                save(this.saveForm).then(response => {
                    this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                    if (response.code == 1) {
                        this.completeDialog = false;
                        this.saveForm.remark = '';
                        this.fetchData();
                    }
                });
            },
            completeClick(row, index) {
                let date = new Date().toLocaleString('chinese', { hour12: false });
                let day = new Date().toLocaleString('chinese', { hour12: false }).split(' ')[0].split('/')[2]
                let time = new Date().toLocaleString('chinese', { hour12: false }).split(' ')[1].split(':')[0]
                let rowDay = row.create_time.split('-')[2]
                const h = this.$createElement;
                if (this.list.length == 1) {
                    if (index == 0 && time < 21 && this.list[index].status != 1) {
                        this.$msgbox({
                            title: '提早结业提醒',
                            message: h('p', null, [
                                h('span', null, '当前时间未到 '),
                                h('i', { style: 'color: red' }, '21:00 '),
                                h('span', null, '是否继续进行结业操作，结业后当天营业即为结束。 '),
                            ]),
                            showCancelButton: true,
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(action => {
                            this.getComplete(row, index);
                        });
                    } else {
                        this.getComplete(row, index);
                    }
                } else if (this.list.length > 1) {
                    if (index == 0 && time < 21 && this.list[index].status != 1) {
                        if (this.list[index + 1].status == 1) {
                            this.$msgbox({
                                title: '提早结业提醒',
                                message: h('p', null, [
                                    h('span', null, '当前时间未到 '),
                                    h('i', { style: 'color: red' }, '21:00 '),
                                    h('span', null, '是否继续进行结业操作，结业后当天营业即为结束。 '),
                                ]),
                                showCancelButton: true,
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(action => {
                                this.getComplete(row, index);
                            });
                        } else {
                            this.getComplete(row, index);
                        }
                    } else {
                        this.getComplete(row, index);
                    }
                } else {
                    this.getComplete(row, index);
                }
            },
            getComplete(row, index) {
                complete({ store_id: this.formInline.store_id, datetime: row.create_time, zq: 1 }).then(response => {
                    let diff = 0;
                    response.list.forEach(function (val) {
                        diff += (val.cash_actual * 1 + val.bank_actual * 1 + val.m1 * 1 + val.m2 * 1) - (val.m0 * 1 + val.m1 * 1 + val.m2 * 1 + val.m3 * 1);
                    });
                    this.diff = diff
                    this.saveForm.datetime = row.create_time;
                    this.saveForm.store_id = this.formInline.store_id;
                    this.is_look = row.status == 1 ? true : false
                    this.dialogTitle = row.status == 1 ? '结业详情' : '结业提醒'
                    this.complete_status = row.status == '1' ? '已结业' : row.status == '2' ? '未结业' : '待结业'
                    this.completeInfo = response;
                    this.completeDialog = true;
                });
            },
            getStore() {
                getStoreList({ brand: this.formInline.brand, category_id: 275 }).then(response => {
                    this.storeList = response;
                   let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    if (this.list.length == 0) {
                        this.searchClick()
                    }
                });
            },
            storeChange() {
                this.fetchData();
            },
            // 搜索
            searchClick() {
                this.fetchData();
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    };
</script>